import React, { Component } from "react";
import { Toast, Modal } from "antd-mobile";
import "./xhdPayBackDetail.scss";
import { connect } from "react-redux";
import { InterfaceG } from "../../../config/Config";
import yhTools from "../../../tools/yh";
import MainLayout from "../../../component/mainLayout/mainLayout";
import XFButton from "../../../xfCompontent/xfButton/xfButton";
import helpIcon from "../../../images/jr-icon-help-tips.png";
class XhdPayBackDetail extends Component {
	constructor(props) {
		super(props);
		this.state = {
			btnText: "立即还款",
			billInfo: [],
			payDatas: {
				billInfo: {
					latestRepayDate: "",
					billTotal: ""
				}
			},
			billOverDays: "",
			showModal: false,
			status: false
		};
	}

	componentDidMount() {
		const urlParams = this.props.location.state;

		const type = urlParams.type;
		const billOverDays = urlParams.payDatas.billInfo.billOverDays;
		let payDatas = this.state.payDatas;
		if (type == "1") {
			payDatas = urlParams.payDatas;
			this.setState({
				billInfo: urlParams.datas
			});
		} else {
			payDatas = {
				billInfo: {
					latestRepayDate: urlParams.datas.billTermDate,
					billTotal: urlParams.datas.billTermTotal
				}
			};

			this.getPayDetailInfo(urlParams.datas.billTermDate);
		}
		console.log(3333, payDatas);
		this.setState({
			payDatas: payDatas,
			billOverDays,
			type
		});
	}

	//点击剩余计划进来获取账单详情
	getPayDetailInfo(billTermDate) {
		const _this = this;
		let objs = {
			url: InterfaceG.xhdRepayBillInfoDetail,
			params: {
				billTermDate,
				lnid: this.props.getAppPlatformsDatas.lnid,
				applyNo: this.props.getAppPlatformsDatas.applyNo
			},
			_alertShow: false
		};
		Toast.loading("加载中...", 100);
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				Toast.hide();
				_this.setState({
					billInfo: res.data.perBillInfo,
					status: res.data.status
				});
			} else {
				Toast.hide();
				Toast.info(res.message, 2);
			}
		});
	}

	btnFn() {
		this.gotoPay();
	}

	//点击还款按钮
	gotoPay() {
		if (!this.state.payDatas.isCanPay) {
			return false;
		}
		this.props.history.push({
			pathname: `/repaymentMoney/${JSON.stringify({
				repayBill: "0",
				fromType: "XHD",
				loanArray: [],
				backPath: "xhdPayBackHome"
			})}`
		});
	}

	gotoxhdRecordList() {
		this.props.history.push("/loanAndPayDetail/1");
	}

	seeFx() {
		this.setState({
			showModal: true
		});
	}

	closeFx() {
		this.setState({
			showModal: false
		});
	}

	render() {
		const { billInfo, type = "", payDatas, billOverDays, status } = this.state;
		let _pageParams = {
			header: {
				title: "还款详情",
				goBackPath: "/xhdPayBackHome",
				rightButt: "借还记录",
				rightButtCallBack: this.gotoxhdRecordList.bind(this)
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles,
			fromUrl: "xhdPayBackListDetail"
		};
		const btnStyle = payDatas.isCanPay
			? {
					borderRadius: "0.4rem"
			  }
			: { opacity: "0.2", borderRadius: "0.4rem" };

		return (
			<MainLayout pageParams={_pageParams}>
				<div className="xhd-payback-detail">
					<div className="xhd-payback-detail-main">
						<div className="payBack-detail-heard">
							<h3>{payDatas.billInfo.latestRepayDate}应还(元)</h3>
							<h2>{payDatas.billInfo.billTotal}</h2>
							<p>
								我们将会在
								<span>
									{billOverDays || status ? "每天" : "还款日当天"}10:00和16:00
								</span>
								发起自动扣款，请确保还款卡内余额充足，或还款日当天主动还款
							</p>
						</div>

						{billInfo.map((item, index) => {
							return (
								<div key={index} className="payBack-detail-item">
									<div className="detail-item-title">
										{item.loanDate} 借款{item.loanAmt}元
									</div>
									<div key={index} className="detail-item-content">
										<div className="item-content-box">
											<div className="item-content-name content-date">
												( 第{item.loanCurrentTerm}/{item.loanTerms}期 )
											</div>
											<div className="item-content-value content-date">
												{item.loanTermTotal}
											</div>
										</div>
										<div className="item-content-box">
											<div className="item-content-name">本金</div>
											<div className="item-content-value">
												{item.loanTermPrin}
											</div>
										</div>
										<div className="item-content-box">
											<div className="item-content-name">利息</div>
											<div className="item-content-value">
												{item.loanTermInt}
											</div>
										</div>
										<div
											className="item-content-box"
											style={{ display: item.loanTermPint ? "flex" : "none" }}
										>
											<div className="item-content-name">
												<span>罚息</span>
												<img onClick={this.seeFx.bind(this)} src={helpIcon} />
											</div>
											<div className="item-content-value">
												<span>{item.loanTermPint}</span>
											</div>
										</div>
										<div className="item-content-box">
											<div className="item-content-name">还款方式</div>
											<div className="item-content-value">等额本息</div>
										</div>
									</div>
								</div>
							);
						})}
					</div>

					{type == "1" && (
						<div className="payBack-detail-btn">
							<XFButton
								btnStyle={btnStyle}
								handleBtn={this.btnFn.bind(this)}
								btText={payDatas.btnText}
							/>
						</div>
					)}
					<Modal
						visible={this.state.showModal}
						transparent
						maskClosable={false}
						className="fxModal"
						title="逾期罚息"
					>
						<div className="fxModal-content">
							{/* <p>自逾期之日起，每天对逾期本金收取约定利率24%的罚息，直至逾期还清。</p> */}
							<p>
								自逾期之日起，每天对逾期本金收取约定利率的罚息，直至逾期还清。
							</p>
							<p>罚息=逾期本金 x 逾期日利率 x 逾期天数</p>
							<span onClick={this.closeFx.bind(this)} className="close-icon">
								X
							</span>
						</div>
					</Modal>
				</div>
			</MainLayout>
		);
	}
}
// className={!isCanPay?"btn btn-disabled":"btn"}
function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps() {
	return {};
}

const XhdPayBackDetailPage = connect(
	mapStateToProps,
	mapDispatchToProps
)(XhdPayBackDetail);
export default XhdPayBackDetailPage;
